<script lang="ts" setup>
import { ref } from "vue";
import { getPostDetail } from "@/api/api";
import { useRoute } from "vue-router";
import defaltImg from "@/assets/avatar.jpg";
import {formatTime} from "@/share/helper"

    const route = useRoute();
    const postid = route.params.id;
    const post = ref({});

    getPostDetail(postid).then((res) => {
      post.value = res;
    });

</script>

<template>
  <article class="post-detail-container container2">
    <div class="post-detail-img">
      <img :src="post.image" />
    </div>

    <h4 class="post-detail-title">{{ post.title }}</h4>

    <div class="author-box">
      <div class="author-info">
        <div class="author-avatar">
          <img
            :src="
              (post.author && post.author.avatar) ||
              defaltImg
            "
            alt
          />
        </div>
        <div class="author-text">
          <div class="author-name">
            {{ post.author && post.author.nickName }}
          </div>
          <div class="author-desc">
            {{ post.author && post.author.description }}
          </div>
        </div>
      </div>

      <div class="author-time">{{ formatTime(post.createdAt) }}</div>
    </div>

    <div>{{ post.content }}</div>
  </article>
</template>
<style lang="scss" scoped>
.post-detail-img {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  img {
    height: 150px;
    object-fit: contain;
    vertical-align: bottom;
  }
}
.post-detail-title {
  margin-top: 20px;
  font-size: 32px;
}
.author-box {
  padding: 10px 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}
.author-info {
  display: flex;

  align-items: center;
}
.author-avatar {
  flex: 0 0 auto;
  font-size: 0;
  line-height: 60px;
  width: 60px;
  height: 60px; // height设置成table-cel会有table的高度
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ccc;
  margin-right: 20px;
  text-align: center;
  img {
    vertical-align: middle;
    border-radius: 50%;
    border: 2px solid #ccc;
    width: 50px;
    height: 50px;
  }
}
.author-text {
  // vertical-align: middle;
}
.author-name {
  font-size: 22px;
}
.author-desc {
  font-size: 14px;
  color: #606266;
}
.author-time {
  margin-left: 20px;
  flex: 0 0 auto;
  vertical-align: middle;
}
</style>
